<template>
  <lazy-component class="zui-background-color-white zui-mt-10px">
    <!-- 楼层上面的橱窗，start -->
    <div class="zui-p-10px">
      <z-image @click="handleLink(billboard.path)" :src="billboard.src" width="100%" height="calc((100vw - 20px) * .3)" border-radius="2px"></z-image>
    </div>
    <!-- 楼层上面的橱窗，end -->

    <!-- 楼层上的商品展位区域，start -->
    <div class="main-floor-overflow">
      <div class="main-floor-group">
        <!-- 循环一个商品，start -->
        <div v-for="(item, index) in value" :key="index" class="main-floor__item">
          <z-image @click="handleGoods(item)" :src="item.goods.picture" size="25vw" border-radius="2px"></z-image>
          <div class="main-floor__item__title">{{ item.goods.title }}</div>
          <div class="zui-flex zui-flex--x-space-between">
            <div class="main-floor__item__price">{{ item.sku.price / 100 | currency('￥') }}</div>
            <van-icon @click="handleClick(item)" class="zui-color-primary" name="add"/>
          </div>
        </div>
        <!-- 循环一个商品，end -->
      </div>
    </div>
    <!-- 楼层上的商品展位区域，end -->
  </lazy-component>
</template>

<script>
/**
 * 楼层组件
 * @param { object } billboard - 楼层橱窗，对象{ src: src, path: path }
 * @param { array } value - 楼层商品位，数组，结构参考最下面的注释，仿有赞的结构
 */
export default {
  props: {
    value: Array,
    billboard: Object
  },
  methods: {
    handleLink (path) {
      console.log('链接，跳转专题页')
      this.$router.push({
        path: path
      })
    },
    handleClick (value) {
      if (value.sku.none_sku) {
        console.log('这是无规格商品！', value)
      } else {
        console.log('这是有规格的商品', value)
      }
    },
    handleGoods (value) {
      console.log('跳转商品详情', value.sku.collection_id)
      this.$router.push({
        path: '/',
        query: {
          goods: value.sku.collection_id
        }
      })
    }
  }
}

/*
数据结构参考
{
  type: 'floor',
  billboard: {
    src: src,
    path: path
  },
  value: [
    {
      sku: {
        tree: [
          {
            k: '颜色',
            v: [
              {
                id: this.$utils.randomNumber(10000, 99999),
                name: '红色' + i,
                imgUrl: this.$utils.randomEnum(this.$store.state.image)
              },
              {
                id: this.$utils.randomNumber(10000, 99999),
                name: '蓝色' + i,
                imgUrl: this.$utils.randomEnum(this.$store.state.image)
              },
              {
                id: this.$utils.randomNumber(10000, 99999),
                name: '绿色' + i,
                imgUrl: this.$utils.randomEnum(this.$store.state.image)
              }
            ],
            k_s: 's1'
          }
        ],
        list: [
          {
            id: 2259,
            price: this.$utils.randomNumber(1000, 5000),
            s1: '1215',
            s2: '1193',
            s3: '0',
            stock_num: 110
          }
        ],
        price: this.$utils.randomNumber(1000, 5000),
        stock_num: this.$utils.randomNumber(1000, 2000),
        collection_id: 2261,
        none_sku: i % 2
      },
      goods: {
        title: '商品名称' + i,
        picture: this.$utils.randomEnum(this.$store.state.image)
      }
    }
  ]
}
*/
</script>

<style lang="less">
  @import "../../../common/z-theme/_variable.less";
  .main-floor-overflow {
    position: relative;
    display: block;
    overflow-x: auto;
    padding-bottom: 10px;
  }

  .main-floor-group {
    position: relative;
    display: inline-flex;
    flex-flow: row nowrap;
    padding-right: 10px;
    padding-left: 10px;
  }

  .main-floor__item {
    flex: none;
    width: 25vw;
    &:not(:last-child) {
      margin-right: 10px;
    }
  }

  .main-floor__item__title {
    font-size: @--font-size-small;
    color: @--color-text-primary;
    margin-top: 5px;
    .setEllip();
  }

  .main-floor__item__price {
    font-family: Tahoma;
    font-size: @--font-size-small;
    color: @--color-danger;
    letter-spacing: 0;
    font-weight: 700;
  }
</style>
